<template>
	<!--产品属性设置-->
	<view class="page-content">
		<view class="page-top">
			<view class="tip" v-if="pageType === 'pop'">提示：最多可设置3级，至少创建2级可使用。</view>
			<view class="tip" v-else-if="pageType === 'pro' || pageType === 'prop'">提示：最多可设置2级，至少创建2级可使用。</view>
		</view>
		<!--列表-->
		<!-- 参数
		* @property {ObjectArray} list = [] 列表数据,自定义数据，会传递到name="rowContent"插槽  
		* @property {Boolean} feedbackGeneratorState = [true|false] 是否开启拖动触感反馈  
		* @property {Boolean} isLongTouch = [true|false] 是否开启长按拖动  
		* @property {Boolean} isAutoScroll = [true|false] 是否拖拽至边缘自动滚动列表  
		* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
		* @property {Number} listHeight = [] 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
		* @property {Number} rowHeight = [] 必填,行高,单位:px,默认44px
		* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
		* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
		* @event {Function} onclick 点击行触发事件 返回值:{index:'被点击行下标',value:'被点击行数据'} 
		*/ 
		@toClick="toClick" @onClickAdd2="onClickAdd2" -->
		<!-- 当前属性设置 isLongTouch关闭长按拖动 isAutoScroll开启自动滚动 feedbackGeneratorState开启触感反馈 rowHeight行高55  -->
		<view class="page-body">
			<w-dragSorts @toClick="toClick" @onClickAdd="onClickAdd" @onClickEdit="onClickEdit" @onClickDel="onClickDel"
				@onClickAdd1="onClickAdd1" @onClickEdit1="onClickEdit1" @onClickDel1="onClickDel1"
				@onClickEdit2="onClickEdit2" @onClickDel2="onClickDel2" @checks="checks" :list="pageobj"
				:isLongTouch="false" :isAutoScroll="true" :feedbackGeneratorState="true" :rowHeight="55"
				:pageType="pageType" @change="change" @confirm="confirm" @onclick="onclick">
			</w-dragSorts>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit" v-if="tipType===1 || tipType===2">{{tipType===1?'编辑':tipType===2?'新增':''}}</view>
				<view class="w-con">
					<view class="input-row" v-if="tipType===1 || tipType===2">
						<input class="input-row-w" type="text" v-model="inputVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="inputVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
					<view class="txt-row" v-if="tipType===3">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm1">确认</view>
				</view>
			</view>
		</w-popup>
		<!--编辑框二-->
		<w-popup :show="showtip2" :type="type1" @change="change1">
			<view class="w-tip2">
				<view class="w-tit">
					{{navType===1?'编辑二级POP编码': navType===2?'新增二级POP编码':navType===3?'编辑三级POP编码':navType===4?'新增三级POP编码':''}}
				</view>
				<view class="w-con">

					<view class="input-row">
						<view class="input-row-t"><text class="required" v-if="required">*</text>名称：</view>
						<input class="input-row-w" type="text" v-model="params.name" placeholder="请输入名称"
							placeholder-style="color:#999"></input>
					</view>
					<view class="input-row2">
						<view class="input-row-t"><text class="required" v-if="required"
								style="color: #fff;">*</text>规格：</view>
						<input class="input-row-w" type="text" v-model="params.width" placeholder="长度(cm)"
							placeholder-style="color:#ddd;fontSize:11px"></input>
						<text class="input-row-x">x</text>
						<input class="input-row-w" type="text" v-model="params.height" placeholder="宽度(cm)"
							placeholder-style="color:#ddd;fontSize:11px"></input>
					</view>
					<view class="txt-row">备注: 规格非必填，若设置规格则下单时统一按该规格下单不可修改。</view>
					<view class="input-row3">
						<view class="input-row-t"><text class="required" v-if="required">*</text>材质：</view>
						<AppList :listData="appListData" @listChange="listChange" @checks="checks"></AppList>
					</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm2">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>
<script>
	import wDragSorts from "@/components/w-dragSorts/w-dragSorts2.vue"; //拖拽
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue"; //折叠面板
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item3.vue"; //折叠面板
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 弹窗
	import AppList from "@/components/w-dragList/AppList.vue" //
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getProductAttrLists, //获取产品属性列表
		addProductAttrs, //新增产品属性
		editProductAttrs, //编辑产品属性
		delProductAttrs, //删除产品属性
		addProductTextures, //新增产品材质
		editProductTextures, //编辑产品材质
		delProductTextures, //删除产品材质
		getProductTextureLists, //获取产品材质列表
		addProductCodings, //添加POP/道具编码
		editProductCodings, //编辑POP/道具编码
		delProductCodings, //删除POP/道具编码
		getProductCodingLists, //获取POP/道具编码列表
		sortAttrs, //产品排序
		sortCodings, //编码排序
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import loadMore from '@/components/uni-load-more/load-more.vue';
	export default {
		components: {
			wTit,
			loadMore,
			wDragSorts,
			uniCollapse,
			uniCollapseItem,
			AppList
		},
		data() {
			return {
				sel_id: 0,
				props: {
					label: 'name'
				},
				required: true,
				tipType: 0, // 1-编辑 2-新增 3-删除
				navType: 1, // 2-二级导航 3-三级导航
				showtip: false, //是否显示弹窗1
				showtip2: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				inputVal: '',

				appListData: [],
				appListData2: [],
				pageobj: [],
				params: {
					company_id: '',
					name: '',
					top_id: '',
					type: '',
					height: '',
					width: '',
					product_texture_id: '',

				},
				formData: {
					page: 1,
					limt: 10
				},
				pagedata: {
					company_id: 0,
					name: '',
					top_id: 0,
					id: 0,
					type: 0
				},
				pageType: '', //pro-产品属性 pop-POP编码 prop-道具编码
				openArr: []
			}
		},
		computed: {
			...mapGetters(['companyInfo'])
		},
		onLoad(option) {
			console.log(222, option)
			this.pagedata.company_id = this.companyInfo.id;
			this.params.company_id = this.companyInfo.id;
			if (option.pageType) {
				this.pageType = option.pageType;
				//pro-产品属性 pop-POP编码 prop-道具编码
				if (option.pageType === 'pro') {
					this.pagedata.type = '';

				} else if (option.pageType === 'pop') {
					uni.setNavigationBarTitle({
						title: 'POP编码设置'
					})
					this.pagedata.type = 1;
					this.params.type = 1;
					this.getmaterials();
				} else if (option.pageType === 'prop') {
					uni.setNavigationBarTitle({
						title: '道具编码'
					})
					this.pagedata.type = 2;
					this.params.type = 2;
					this.getmaterials();
				}
			}
		},
		onShow() {
			this.pagedata.company_id = this.companyInfo.id;
			this.params.company_id = this.companyInfo.id;
			this.getdata();
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			//0级增加
			if (e.index == 0) {
				this.tipType = 2;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.inputVal = '';
				if (this.pageType === 'pro') {
					this.pagedata.id = 0;
					this.pagedata.top_id = 0
				} else if (this.pageType === 'pop') {
					this.params.id = 0;
				} else if (this.pageType === 'prop') {
					this.pagedata.id = 0;
					this.pagedata.top_id = 0
				}
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			//点击折叠下拉
			toClick(id, isOpen) {
				console.log('打开面板')
				this.sel_id = id
				if (this.pageobj && this.pageobj.length > 0) {
					this.pageobj.forEach(item => {
						if (item.id === id) {
							item.isOpen = isOpen
							if (item.has_next) {
								if (isOpen) {
									if (this.pageType === 'pro') { //产品属性
										this.pagedata.top_id = id;
										getProductAttrLists(this.pagedata).then(res2 => {
											if (res2.code === 2000) {
												this.$nextTick(() => {
													item.submenu = res2.data;
												})
											}
										})
									} else if (this.pageType === 'pop') { //pop
										this.pagedata.top_id = id;
										getProductCodingLists(this.pagedata).then(res2 => {
											if (res2.code === 2000) {
												this.$nextTick(() => {
													console.log(88888, res2.data)
													item.submenu = res2.data;

													if (res2.data && res2.data.length > 0) {
														res2.data.forEach(item2 => {
															if (item2.has_next) {
																this.$set(item2, 'submenu',
																	Array);
																getProductCodingLists({
																	company_id: this
																		.pagedata
																		.company_id,
																	top_id: item2
																		.id,
																	type: this
																		.pagedata
																		.type
																}).then(res3 => {
																	item2.submenu =
																		res3.data;
																})
															}
														})
													}
												})
											}
										})

									} else if (this.pageType === 'prop') { //prop
										this.pagedata.top_id = id;
										getProductCodingLists(this.pagedata).then(res2 => {
											if (res2.code === 2000) {
												this.$nextTick(() => {
													item.submenu = res2.data;
												})
											}
										})
									}
								}
							}
						}
					})
					this.openArr = this.pageobj.filter(val => val.isOpen)
				}
			},
			//初始化数据
			async getdata() {
				if (this.pageType === 'pro') { //产品属性
					this.pagedata.top_id = 0;
					getProductAttrLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									let submenu = [];
									this.$set(item, 'submenu', submenu);
									this.$set(item, 'isOpen', false);
								})
							}
							this.pageobj = pageobj;
							this.openArr.forEach(item => {
								this.toClick(item.id, item.isOpen)
							})
							//this.confirm()
						}
					})
				} else if (this.pageType === 'pop') { //pop
					this.pagedata.top_id = 0;
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									this.$set(item, 'submenu', Array);
									this.$set(item, 'isOpen', false);
								})
							}
							this.pageobj = pageobj;
							this.openArr.forEach(item => {
								this.toClick(item.id, item.isOpen)
							})
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				} else if (this.pageType === 'prop') { //prop
					this.pagedata.top_id = 0;
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									this.$set(item, 'submenu', Array);
									this.$set(item, 'isOpen', false);
								})
							}
							this.pageobj = pageobj;
							this.openArr.forEach(item => {
								this.toClick(item.id, item.isOpen)
							})
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				}
			},
			onclick(e) {
				console.log(8888, e.value.id)
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {

				} else if (this.pageType === 'prop') {

				}
				/* console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ==='); */
			},
			change(e) {
				/* console.log('=== change start ===');
				console.log("被拖动行: ",e.moveRow);
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ==='); */
			},
			async confirm(e) {
				console.log('=== confirm start ===');
				//console.log("被拖动行: " + JSON.stringify(e.moveRow) , e.list);
				//console.log('原始下标：', e.index);
				//console.log('移动到：', e.moveTo);
				console.log('=== confirm end ===');
				//拖动时关闭折叠
				if (this.pageobj && this.pageobj.length > 0) {
					this.pageobj.forEach(item => {
						item.submenu = []
						item.isOpen = false
					})
				}

				if (this.pageType === 'pro') {
					if (e.list && e.list.length > 0) {
						e.list.forEach((item, index) => {
							sortAttrs({
								id: item.id,
								order: (e.list.length - index)
							}).then(res => {
								if (res.code === 2000) {
									console.log('排序', e.list.length - index)
									if (e.list.length === (index + 1)) {
										this.getdata();
									}
								}
							})
						})
					}
				} else if (this.pageType === 'pop') {
					if (e.list && e.list.length > 0) {
						e.list.forEach((item, index) => {
							sortCodings({
								id: item.id,
								order: (e.list.length - index)
							}).then(res => {
								if (res.code === 2000) {
									console.log('排序', e.list.length - index)
									if (e.list.length === (index + 1)) {
										this.getdata();
									}
								}
							})
						})
					}
				} else if (this.pageType === 'prop') {
					if (e.list && e.list.length > 0) {
						e.list.forEach((item, index) => {
							sortCodings({
								id: item.id,
								order: (e.list.length - index)
							}).then(res => {
								if (res.code === 2000) {
									console.log('排序', e.list.length - index)
									if (e.list.length === (index + 1)) {
										this.getdata();
									}
								}
							})
						})
					}
				}

			},
			sortAttr() {
				// /sortAttrs()
			},
			// 弹窗确认1
			confirm1() {
				if (this.pageType === 'pro') { //产品属性
					this.pagedata.name = this.inputVal;
					if (this.tipType === 2) { //增加
						addProductAttrs(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata();
							}
						})
					} else if (this.tipType === 1) { //编辑
						this.pagedata.name = this.inputVal;
						editProductAttrs(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '修改成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata();
							}
						})
					} else if (this.tipType === 3) { //删除
						delProductAttrs(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata();
							} else {
								console.log(123, res.msg)
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				} else if (this.pageType === 'pop') { //pop编码设置
					this.params.name = this.inputVal;
					if (this.tipType === 2) { //增加
						addProductCodings(this.params).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata();
							}
						})
					} else if (this.tipType === 1) { //编辑
						this.params.name = this.inputVal;
						editProductCodings(this.params).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '修改成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata();
							}
						})
					} else if (this.tipType === 3) { //删除
						delProductCodings(this.params).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}

				} else if (this.pageType === 'prop') { //道具编码
					this.pagedata.name = this.inputVal;
					if (this.tipType === 2) { //增加
						addProductCodings(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					} else if (this.tipType === 1) { //编辑
						this.pagedata.name = this.inputVal;
						editProductCodings(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '修改成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					} else if (this.tipType === 3) { //删除
						delProductCodings(this.pagedata).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				}

				this.showtip = false;
			},
			// 弹窗确认2
			confirm2() {
				let params = this.params;
				if (params.name === "") {
					uni.showToast({
						title: "名称不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (params.product_texture_id === "") {
					uni.showToast({
						title: "材质不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.navType === 1 || this.navType === 3) { //编辑
					editProductCodings(params).then(res => {
						if (res.code === 2000) {
							uni.showToast({
								title: '添加成功！',
								icon: 'none',
								duration: 2000
							})
							this.showtip2 = false;
							this.getdata()
						}
					})

				} else if (this.navType === 2 || this.navType === 4) {
					addProductCodings(params).then(res => {
						if (res.code === 2000) {
							uni.showToast({
								title: '添加成功！',
								icon: 'none',
								duration: 2000
							})
							this.showtip2 = false;
							this.getdata().then(() => {

							});
						}
					})
				}


			},
			listChange(option) {
				console.log("listChange", option)
			},
			//下拉加载
			loadmore() {
				console.log('下拉加载');
				let _self = this;
				_self.load_sta = true;
				_self.formData.page++;
				_self.getdata(_self.formData);
			},

			//一级增加
			onClickAdd(id) {
				console.log(1, id)
				if (this.pageType === 'pro') {
					this.inputVal = '';
					this.tipType = 2;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.pagedata.top_id = id;

				} else if (this.pageType === 'pop') {
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.navType = 2;
					this.params.id = 0;
					this.params.top_id = id;
					this.params.name = '';
					this.params.product_texture_id = '';
					this.params.width = '';
					this.params.height = ''
					this.appListData = JSON.parse(JSON.stringify(this.appListData2));
				} else if (this.pageType === 'prop') {
					this.inputVal = '';
					this.tipType = 2;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.pagedata.id = 0;
					this.pagedata.top_id = id;
				}
			},
			//一级编辑
			onClickEdit(item) {
				console.log(2, item)
				this.tipType = 1;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.inputVal = item.name;
				if (this.pageType === 'pro') {
					this.pagedata.id = item.id;
					this.pagedata.top_id = 0;
				} else if (this.pageType === 'pop') {
					this.params.id = item.id;
					this.params.top_id = 0;
				} else if (this.pageType === 'prop') {
					this.pagedata.id = item.id;
					this.pagedata.top_id = 0;
				}
			},
			//一级删除
			onClickDel(id) {
				console.log(3, id)
				this.tipType = 3;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				if (this.pageType === 'pro') {
					this.pagedata.id = id;
				} else if (this.pageType === 'pop') {
					this.params.id = id;
				} else if (this.pageType === 'prop') {
					this.pagedata.id = id;
				}
			},
			//二级级增加
			onClickAdd1(id) {
				console.log(11, id)
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.navType = 4;

					this.params.id = 0;
					this.params.top_id = id;
					this.params.height = '';
					this.params.product_texture_id = '';
					this.params.width = '';
					this.params.name = '';

					console.log(1112, this.appListData)
					//材质选择
					this.appListData = JSON.parse(JSON.stringify(this.appListData2));
					if (this.appListData && this.appListData.length > 0) {
						this.appListData.forEach((ite, ind) => {
							ite.checked = false
						})
					}
				} else if (this.pageType === 'prop') {

				}
			},
			//二级编辑
			onClickEdit1(item) {
				console.log(111, item)
				if (this.pageType === 'pro') {
					this.pagedata.id = item.id;
					this.tipType = 1;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.inputVal = item.name;
				} else if (this.pageType === 'pop') {
					this.params.id = item.id;
					this.params.top_id = item.top_id;
					this.params.height = item.height;
					this.params.product_texture_id = item.product_texture_id;
					this.params.width = item.width;
					this.params.name = item.name;
					this.navType = 1;
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';

					//材质选择
					this.appListData = JSON.parse(JSON.stringify(this.appListData2))
					if (this.appListData && this.appListData.length > 0) {
						this.appListData.forEach((ite, ind) => {
							if (ite.id === item.product_texture_id) {
								ite.checked = true
							} else {
								ite.checked = false
							}
						})
					}
				} else if (this.pageType === 'prop') {
					this.pagedata.id = item.id;
					this.tipType = 1;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
					this.inputVal = item.name;
				}
			},
			//二级删除
			onClickDel1(id) {
				console.log(222, id)
				if (this.pageType === 'pro') {
					this.pagedata.id = id;
					this.tipType = 3;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';

				} else if (this.pageType === 'pop') {
					this.params.id = id;
					this.tipType = 3;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';

				} else if (this.pageType === 'prop') {
					this.pagedata.id = id;
					this.tipType = 3;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';
				}

			},
			//三级编辑
			onClickEdit2(item) {
				console.log(111, item)
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {
					this.params.id = item.id;
					this.params.top_id = item.top_id;
					this.params.height = item.height;
					this.params.product_texture_id = item.product_texture_id;
					this.params.width = item.width;
					this.params.name = item.name;
					this.navType = 3;
					this.showtip2 = true;
					this.content1 = 'center';
					this.type1 = 'center';

					//材质选择
					this.appListData = JSON.parse(JSON.stringify(this.appListData2))
					if (this.appListData && this.appListData.length > 0) {
						this.appListData.forEach((ite, ind) => {
							if (ite.id === item.product_texture_id) {
								ite.checked = true
							} else {
								ite.checked = false
							}
						})
					}

				} else if (this.pageType === 'prop') {

				}
			},
			//三级删除
			onClickDel2(id) {
				console.log(222, id)
				if (this.pageType === 'pro') {

				} else if (this.pageType === 'pop') {

					this.params.id = id;
					this.tipType = 3;
					this.showtip = true;
					this.content1 = 'center';
					this.type1 = 'center';

				} else if (this.pageType === 'prop') {

				}

			},
			//折叠面板
			change(e) {

			},
			//选择材质
			checks(id, checked) {
				console.log(555, id, checked)
				if (this.appListData && this.appListData.length > 0) {
					this.appListData.forEach((item, ind) => {
						if (item.id === id) {
							item.checked = !checked
						} else {
							item.checked = false
						}
					})
				}
				this.params.product_texture_id = id
			},
			//获取材质列表
			getmaterials() {
				if (this.pageType === 'pop' || this.pageType === 'prop') {
					getProductTextureLists(this.pagedata).then(res => {
						console.log(123333, res)
						if (res.code === 2000) {
							let appListData = res.data;
							if (appListData && appListData.length > 0) {
								appListData.forEach(item => {
									this.$set(item, 'checked', false)
								})
							}
							this.appListData2 = appListData;
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
				this.showtip2 = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
					this.showtip2 = false;
				}
			},
			//清空
			clear() {
				this.inputVal = '';
			}
		}
	}
</script>

<style lang="scss">
	.row {
		.text {
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
		}
	}

	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	/* 提示窗口 */
	.w-tip2 {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
			border-top: 1rpx solid #f5f5f5;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			flex-direction: column;
			padding: 40rpx 40rpx;

			.input-row {
				display: flex;
				align-items: center;
				width: 100%;
				margin-bottom: 30rpx;

				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					text-align: left;
					color: $font-color-3;
					font-size: 28rpx;
					height: 52rpx;
					border: 1px solid #EEEEEE;
					border-radius: 6rpx;
				}

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.txt-row {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: $font-color-r;
				margin-bottom: 20rpx;
			}

			.input-row2 {
				display: flex;
				align-items: center;
				width: 100%;
				margin-bottom: 10rpx;

				.input-row-w {
					display: flex;
					flex: 1;
					text-align: center;
					color: $font-color-3;
					font-size: 28rpx;
					height: 52rpx;
					border: 1px solid #EEEEEE;
					border-radius: 6rpx;
				}

				.input-row-x {
					color: $font-color-9;
					margin: 0 20rpx;
					line-height: 52rpx;
				}

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.input-row3 {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-bottom: 10rpx;

				.input-row-t {
					line-height: 52rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.txt-l {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		.texture {
			height: 30rpx;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 30rpx;
			color: #198FFF;
			border-radius: 4rpx;
			padding: 0 8rpx;
			background: #CBE6FF;
			margin-right: 20rpx;
		}

		.size {
			font-size: 24rpx;
			font-weight: 400;
			color: $font-color-9;
		}

		.size2 {
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-3;
		}
	}

	.icon-add {
		width: 36rpx;
		height: 36rpx;
	}

	.icon-bj {
		margin-left: 30rpx;
		width: 34rpx;
		height: 34rpx;
	}

	.icon-sc {
		margin-left: 30rpx;
		width: 32rpx;
		height: 34rpx;
	}



	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 36rpx;
		height: 36rpx;
		margin-left: 50rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: calc(100% - 1rpx);
		border-top: 1rpx solid #f5f5f5;

		box-sizing: content-box;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden;

		.page-top {
			width: 100%;
			height: 80rpx;

			.tip {
				font-size: 28rpx;
				font-weight: 400;
				color: $font-color-3;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				background: $uni-bg-color-grey;
			}
		}

		.page-body {
			height: calc(100% - 80rpx);
			display: flex;
			flex-direction: column;
			background: $uni-bg-color-grey;
		}
	}
</style>
